<template >
  <div >
    <div >
      <div  >
        <el-carousel height="50px" indicator-position="outside" >
          <el-carousel-item v-for="item in count" :key="item" >
            <h1   style="height:50px">{{Pollingwhith[item-1].pollingtext}}</h1>
          <!--  <h3>{{ item }}</h3>-->
          </el-carousel-item>
        </el-carousel>
      </div>
      <div>
        <el-input v-model="Userinput" placeholder="请输入用户名称来搜索" clearable style="width: 20%" ></el-input>
        <el-input v-model="Userinput2" placeholder="请输入用户id来搜索" clearable style="width: 20%" ></el-input>
        <el-input v-model="Userinput3" placeholder="请输入用户账号来搜索" clearable style="width: 20%" ></el-input>
      </div>
      <div>
        <el-button type="primary" icon="el-icon-search" @click="selectUser">查询按钮</el-button>
        <el-button type="primary" icon="el-icon-download" @click="exportUser">导出ecexl</el-button>
        <el-button type="primary" icon="el-icon-circle-plus" @click="operAddUSer">添加用户</el-button>
        <el-button type="primary" icon="el-icon-upload2" @click="operUploadPage">文件导入</el-button>
        <el-button type="primary" icon="el-icon-circle-plus" @click="openUserRoleWith">添加角色资源</el-button>
      </div>
    </div>

    <div>
      <el-table
        :data="Usertable"
        stripe
        style="width: 100%"   @selection-change="checkUser">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="userName"
          label="用户名">
        </el-table-column>
        <el-table-column
          prop="userId"
          label="用户id">
        </el-table-column>
        <el-table-column
          prop="userCode"
          label="用户账号">
        </el-table-column>
        <el-table-column
          prop="createdBy"
          label="创建人员">
        </el-table-column>
        <el-table-column
          prop="updateBy"
          label="更新人员">
        </el-table-column>
        <el-table-column
          prop="createdDate"
          label="创建日期">
        </el-table-column>
        <el-table-column
          prop="updateDate"
          label="更新日期">
        </el-table-column>
        <el-table-column
          prop="userImg"
          label="用户头像">
        </el-table-column>
        <el-table-column label="操作"   fixed="right"   width="200"  header-align="center">
          <template slot-scope="scope"   style="height: 50%; ">
              <el-button size="mini" icon="el-icon-circle-plus" @click="operEditUser(scope.row)">编辑</el-button>
              <el-button size="mini" icon="el-icon-minus"   @click="delUser(scope.row)">删除</el-button>

          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[10, 25, 50, 100]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <el-dialog :title="tableNmae" :visible.sync="dialogFormVisible" @close="closeButton">
      <el-form :model="UserForm" >
        <el-form-item label="用户名称" :label-width="formLabelWidth" >
          <el-input v-model="UserForm.userName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户id" :label-width="formLabelWidth" v-if="this.Operation!='add'&& this.Operation!='edit'" >
          <el-input v-model="UserForm.userId" autocomplete="off" v-if="this.Operation!='add'&&this.Operation!='edit'"></el-input>
        </el-form-item>
        <el-form-item label="用户账号" :label-width="formLabelWidth">
          <el-input v-model="UserForm.userCode" autocomplete="off" :disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="用户密码" :label-width="formLabelWidth" >
          <el-input v-model="UserForm.userPassword" autocomplete="off" ></el-input>
        </el-form-item>
        <el-form-item label="新用户密码" :label-width="formLabelWidth"  v-if="this.Operation!='add' ">
          <el-input v-model="UserForm.userNewPassword" autocomplete="off" v-if="this.Operation!='add' "></el-input>
        </el-form-item>
        <el-form-item label="用户确认密码" :label-width="formLabelWidth"  v-if="this.Operation!='add' " >
          <el-input v-model="UserForm.userNewPasswordx" autocomplete="off"  v-if="this.Operation!='add' "></el-input>
        </el-form-item>
        <el-form-item label="用户头像" :label-width="formLabelWidth">
          <el-input v-model="UserForm.userImg" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeUser">取 消</el-button>
        <el-button  @click="UserOperation(Operation)">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="上传文件" :visible.sysible="uploadLabelwidth"  @close="closeButton">
      <el-upload
        class="upload-demo"
        action=""
        drag
        :before-upload="submitUpload"
        multiple>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">目前只支持xls、xlsx格式的文件，目前支持批量添加</div>
      </el-upload>
    </el-dialog>
    <el-dialog title="用户角色信息"  :visible.sync='UserRoleWith'  @close="closeButton"  >
      <el-descriptions title="用户信息"   >
        <el-descriptions-item label="用户名" >{{UserRoleWiths.userName}}</el-descriptions-item>
        <el-descriptions-item label="用户账号">{{UserRoleWiths.userCode}}</el-descriptions-item>
        <el-descriptions-item label="用户id">{{UserRoleWiths.userId}}</el-descriptions-item>
        <el-descriptions-item label="用户头像">{{UserRoleWiths.userImg}}</el-descriptions-item>
      </el-descriptions>
      <el-table
        :data="UserRoletable"  ref="multipleUserRoletable"   @selection-change="checkUserRole"
        stripe
        style="width: 100%"  height="300" >
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="roleId"
          label="角色id">
        </el-table-column>
        <el-table-column
          prop="roleName"
          label="权限名称">
        </el-table-column>
        <el-table-column v-if="hideUserId=='' "
          prop="userId"
          label="用户id">
        </el-table-column>
      </el-table>
      <el-button type="primary" icon="el-icon-circle-plus" @click="UserRoleWith=false">取消</el-button>
      <el-button type="primary" icon="el-icon-circle-plus" @click="addUserRole">添加</el-button>
      <el-button type="primary" icon="el-icon-circle-plus" @click="delUserRole">删除</el-button>
    </el-dialog>
  </div>
</template>

<script>
    export default {
        name: "user",
        data(){
          //定义对象
          return{
            //按钮走向
            disabled:false,
            //用户列表的字段
            Usertable:[{
              userId:'',
              userCode:'',
              userName:'',
              createdBy:'',
              updateBy:'',
              createdDate:'',
              updateDate:'',
              userImg:'',
            }],
            //用户添加按钮参数
            Operation:'',
            tableNmae:'',
            dialogFormVisible:false,
            formLabelWidth:'100px',
            UserForm:{
              userId:'',
              userCode:'',
              userName:'',
              userPassword:'',
              userImg:'',
              userNewPassword:'',
              userNewPasswordx:'',
            },
            //输入框参数
            Userinput:'',
            Userinput2:'',
            Userinput3:'',
            //分页器参数
            currentPage4:1,
            size:10,
            total:0,
            //上传
            uploadLabelwidth:false,
            fileList:[],
            //导出用户信息
            exportUserList:[],
            //用户角色信息
            UserRoleWith:false,
            UserRoleWiths:{
              userId:'',
              userCode:'',
              userName:'',
              createdBy:'',
              updateBy:'',
              createdDate:'',
              updateDate:'',
              userImg:'',
            },
            //添加权限信息
            UserRoletable:[],
            //获取用户角色表格勾选数据
            obtainUserRoleList:[],
            //隐藏用户id
            hideUserId:'随便乱输的',
            //轮询参数
            Pollingwhith:[],
            count:0,

          }
        },
      //调用方法
      mounted:function( ){
        this.selectUser();
        this.selectAllPolling();
        this.selectUserRoleList();
      },

      methods:{
          //更改当前页条数
        handleSizeChange(size){
          this.size=size;
          this.selectUser();
        },
        //更改当前页数
        handleCurrentChange(page){
          this.currentPage4=page;
          this.selectUser();
        },
        //查询所有用户信息
        selectUser( ){
          this.postRequest("user/selectAllUser",{
            //参数传递
            userName:this.Userinput,
            userId:this.Userinput2,
            userCode:this.Userinput3,
            page:this.currentPage4,
            size:this.size,

          }).then(resp=>{
            if (resp && resp.status == 200) {
              this.Usertable = resp.data.rows;
              this.total=resp.data.records;

            }
          })
        },
        //打开用户增加页面
        operAddUSer(){
          //弹框命名
          this.tableNmae="用户添加",
            //打开弹框
          this.dialogFormVisible=true;
          //设置为跳转添加页面
          this.Operation="add";
          //取消只读
          this.disabled=false;
        },
        //关闭页面
        closeUser(){
          //清空表单
          this.UserForm={};
          //关闭弹框
          this.dialogFormVisible=false;
          //重新查询页面
          this.selectUser();
        },
        //表单关闭按钮
        closeButton(){
          this.style='display:none';
          //清空表单
          this.UserForm={};
          this.fileList=[];
          this.uploadLabelwidth=false;
          this.UserRoleWith=false;
        },
        //打开用户修改
        operEditUser(rows){
          this.style='display:display';
          //弹框名称
          this.tableNmae="用户修改",
           // 设置为跳转修改页面
          this.Operation="edit";
          //打开弹框
          this.dialogFormVisible=true;
          //设置为只读
          this.disabled=true;
          //给输入框赋值
          this.$set(this.UserForm,'userCode', rows.userCode);
          this.$set(this.UserForm,'userId',  rows.userId);
          this.$set(this.UserForm,'userName',  rows.userName);
          this.$set(this.UserForm,'userImg',  rows.userImg);
          //优化，下面的赋值后不能编辑
          // this.UserForm.userCode=rows.userCode;
          // this.UserForm.userId=rows.userId;
          // this.UserForm.userName=rows.userName;
          // this.UserForm.userImg=rows.userImg;

        },
        //打开上传页面
        operUploadPage(){
          this.uploadLabelwidth=true;
        },
        //打开删除用户
        delUser(rows){
          this.$confirm("是否要删除【"+rows.userName+"】用户",'提示',{
            confirmButtonText:'确定',
            cancelButtonText:'取消',
          }).then(()=>{
            this.postRequest("user/delUser",{
              userId:rows.userId
            }).then(resp=>{
              if (resp && resp.status == 200) {
                //弹出信息
                this.$message({message:resp.data.errorMsg});
                //刷新页面
                this.selectUser();
                //清空表单
                this.dialogFormVisible = false;
              }
            })
          }).catch(()=>{
            this.$message({info:'取消删除'});
          })

        },
        //进行用户操作
        UserOperation(Operation){
          if(Operation=="add"){
            var userName=this.UserForm.userName;
            var userPassword=this.UserForm.userPassword;
            var userCode=this.UserForm.userCode;
            if(!userName){
              this.$message({message:"用户名不能为空"});
              return false;
            }else if (!userPassword) {
              this.$message({message:"密码不能为空"});
              return false;
            }else if (!userCode) {
              this.$message({message:"账号不能为空"});
              return false;
            }
            this.postRequest("user/addUser",{
              userName:this.UserForm.userName,
              userPassword:this.UserForm.userPassword,
              userCode:this.UserForm.userCode,
              userImg:this.UserForm.userImg,
            }).then(resp=>{
              if (resp && resp.status == 200) {
                //弹出信息
                this.$message({message:resp.data.errorMsg});
                //刷新页面
                this.selectUser();
                //清空表单
                this.dialogFormVisible=false;
              }else{
                //弹出信息
                alert(resp.data.errorMsg);
                //刷新页面
                this.selectUser();
              }
            })
          }else if(Operation=="edit") {
            var passWord = this.UserForm.userPassword;
            //需要修改密码的
            if (!passWord) {
              this.postRequests("user/editUser", this.UserForm).then(resp => {
                if (resp && resp.status == 200) {
                  //弹出信息
                  this.$message({message:resp.data.errorMsg});
                  //刷新页面
                  this.selectUser();
                  //清空表单
                  this.dialogFormVisible = false;
                } else {
                  //弹出信息
                  this.$message({message:resp.data.errorMsg});
                  //刷新页面
                  this.selectUser();
                }
              })
            }
            //不需要修改密码的
            else {
              var  newPassWord=this.UserForm.userNewPassword;
              var newPassWordx=this.UserForm.userNewPasswordx;
              if(newPassWordx!=newPassWordx){
                this.$message({message:"两次输入密码不一致"});
                return false;
              }
              this.postRequests("user/editUser", this.UserForm).then(resp=>{
                if (resp && resp.status == 200) {
                  //弹出信息
                  this.$message({message:resp.data.errorMsg});
                  //刷新页面
                  this.selectUser();
                  //清空表单
                  this.dialogFormVisible = false;
                } else {
                  //弹出信息
                  this.$message({message:resp.data.errorMsg});
                  //刷新页面
                  this.selectUser();
                }
              })
            }

            }
          },
        //文件上传
        submitUpload(file){
          const form = new FormData();
          form.append('file', file);
          this.uploadFileRequest("user/importUser",form).then(resp=>{
            if (resp && resp.status == 200) {
              //弹出信息
              this.$message({message:resp.data.errorMsg});
              //刷新页面
              this.selectUser();
              //关闭表单
              this.uploadLabelwidth = false;
            } else {
              //弹出信息
            //  this.$message({message:resp.data.errorMsg});
              //刷新页面
              this.selectUser();
              //关闭表单
              this.uploadLabelwidth = false;
            }
          })

        },
        //获取用户勾选的数据
        checkUser(selection){
          //勾选数据赋值到exportUserList
          this.exportUserList=selection;
        },
        //获取用户角色勾选的数据
        checkUserRole(selection){
          this.obtainUserRoleList=selection;
        },
        //导出数据
         exportUser(){
           window.open("user/exportUser/?pages="+this.currentPage4+'&sizes='+this.size);

        },

        //打开用户信息页面
        openUserRoleWith(){
          if(this.exportUserList.length==0){
            //弹出信息
            this.$message({message:'请勾选一条数据'});
            return ;
          }else if (this.exportUserList.length>1) {
            this.$message({message:'请只勾选一条数据'});
            return ;
          }else{
            //打开用户权限信息页面
            this.UserRoleWith=true;
            //获取勾选的信息
            this.UserRoleWiths=this.exportUserList[0];
            /*//查看所有的权限
            this.postRequest("role/selectUserRole",{
              userId:this.UserRoleWiths.userId,
            }).then(resp=>{
              if (resp && resp.status == 200) {
                //把查到的数据进行赋值
               this.UserRoletable=resp.data.rows;
              }
            });*/
            //进行回调数据
            this.$nextTick(()=>{
              //根据用户id查询所有的权限
              this.postRequest("role/selectSingleUserRole",{
                userId:this.UserRoleWiths.userId,
              }).then(resp=>{
                if (resp && resp.status == 200) {
                  //fot循环用户信息表单的数据
                  this.UserRoletable.forEach((row)=>{
                    //for循环当前有权限的数据
                    for(let item of resp.data.rows ){
                      //判断是否存在
                      if(item.roleId==row.roleId){
                        //存在就勾选
                        this.$refs.multipleUserRoletable.toggleRowSelection(row,true);

                      }
                    }
                  });
                }
              });

            });

          }
        },
        //查询所有的用户角色
        selectUserRoleList(){
          //查看所有的权限
            this.postRequest("role/selectUserRole",{
              userId:this.UserRoleWiths.userId,
            }).then(resp=>{
              if (resp && resp.status == 200) {
                //把查到的数据进行赋值
               this.UserRoletable=resp.data.rows;
              }
            });
        },
        //勾选添加用户权限数据
        addUserRole(){
          if(this.obtainUserRoleList.length===0){
            this.$message({message:"用户角色不能为空，请勾选用户角色"});
            return false
          }
          this.postRequests("role/addUserRole",this.obtainUserRoleList)
            .then(resp=>{
            if (resp && resp.status == 200) {
              //输出信息
              this.$message({message:resp.data.errorMsg});
              this.UserRoleWith=false;
            }
          })
        },
        //删除非勾选用户权限数据
        delUserRole(){
          if(this.obtainUserRoleList.length===0){
            this.$message({message:"用户角色不能为空，请勾选用户角色"});
            return false
          }
          this.$confirm("是否要删除权限",'提示',{
            confirmButtonText:'确定',
            cancelButtonText:'取消',
          }).then(()=>{
            this.postRequests("role/delUserRole",this.obtainUserRoleList)
              .then(resp=>{
                if (resp && resp.status == 200) {
                  // //输出信息
                  this.$message({message:resp.data.errorMsg});
                  this.UserRoleWith=false;
                }
              })
          }).catch(()=>{
            this.$message({info:'取消删除'});
          });

        },
        selectAllPolling(){
          this.postRequest("user/selectAllPolling").then(resp=>{
            if(resp&& resp.status == 200){
              this.Pollingwhith = resp.data.rows;
              this.count=resp.data.records;
            }
          })
        }


      }
    }
</script>

<style scoped>

</style>
